<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kimi-VL 多模态对话助手</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        h1 {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
        }
        .chat-container {
            background-color: #f9f9f9;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            min-height: 300px;
            max-height: 500px;
            overflow-y: auto;
            border: 1px solid #ddd;
        }
        .message {
            margin-bottom: 15px;
            padding: 10px 15px;
            border-radius: 15px;
            max-width: 80%;
        }
        .user-message {
            background-color: #e1f5fe;
            margin-left: auto;
            text-align: right;
            border-bottom-right-radius: 5px;
        }
        .bot-message {
            background-color: #f0f0f0;
            margin-right: auto;
            border-bottom-left-radius: 5px;
        }
        .input-container {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        #user-input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }
        button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #45a049;
        }
        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
        #loading {
            text-align: center;
            display: none;
        }
        #model-loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: #ffab91;
            color: white;
            text-align: center;
            padding: 10px;
            font-weight: bold;
            z-index: 1000;
        }
        .spinner {
            border: 4px solid rgba(0, 0, 0, 0.1);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border-left-color: #09f;
            animation: spin 1s linear infinite;
            margin: 10px auto;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .control-buttons {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 10px;
        }
        #clear-btn {
            background-color: #f44336;
            font-size: 14px;
            padding: 5px 10px;
        }
        #clear-btn:hover {
            background-color: #d32f2f;
        }
        .session-info {
            font-size: 12px;
            color: #666;
            text-align: right;
            margin-bottom: 5px;
        }
        .settings-container {
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
        }
        .settings-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            cursor: pointer;
        }
        .settings-header h3 {
            margin: 0;
            color: #333;
        }
        .settings-content {
            display: none;
        }
        .settings-content.active {
            display: block;
        }
        .slider-container {
            margin-bottom: 15px;
        }
        .slider-container label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .slider-container .slider-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }
        .slider-container .value-display {
            font-weight: bold;
            color: #4CAF50;
        }
        input[type="range"] {
            width: 100%;
            margin-top: 5px;
        }
        /* 图片上传和预览样式 */
        .upload-btn {
            padding: 10px;
            background-color: #2196F3;
            cursor: pointer;
        }
        .upload-btn:hover {
            background-color: #0b7dda;
        }
        #upload-input {
            display: none;
        }
        .image-preview-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 10px 0;
        }
        .image-preview {
            position: relative;
            width: 100px;
            height: 100px;
            border: 1px solid #ddd;
            border-radius: 5px;
            overflow: hidden;
        }
        .image-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .remove-image {
            position: absolute;
            top: 2px;
            right: 2px;
            background-color: rgba(255, 0, 0, 0.7);
            color: white;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
            cursor: pointer;
        }
        .uploaded-image {
            max-width: 200px;
            max-height: 200px;
            margin: 5px;
            border-radius: 5px;
        }
        .message-content {
            display: flex;
            flex-direction: column;
        }
        .message-images {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 5px;
        }
        /* 思考过程样式 */
        .thinking-container {
            margin-bottom: 10px;
            border-radius: 5px;
            overflow: hidden;
        }
        .thinking-header {
            background-color: #f0f0f0;
            color: #555;
            padding: 5px 10px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9em;
            border-bottom: 1px solid #ddd;
        }
        .thinking-process {
            color: #666;
            font-size: 0.9em;
            background-color: #f9f9f9;
            padding: 10px;
            white-space: pre-wrap;
            display: none;
            border-left: 3px solid #ddd;
            max-height: 300px;
            overflow-y: auto;
        }
        .thinking-process.show {
            display: block;
        }
        .real-response {
            font-weight: normal;
            color: #333;
            padding-top: 10px;
        }
        .toggle-indicator {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="model-loading">
        模型正在加载中，请稍候... 首次加载可能需要1-2分钟
    </div>
    
    <h1>Kimi-VL 多模态对话助手</h1>
    
    <div class="session-info">
        会话ID: <span id="chat-id">{{ chat_id }}</span>
    </div>
    
    <div class="settings-container">
        <div class="settings-header" id="settings-toggle">
            <h3>模型参数设置</h3>
            <span>▼</span>
        </div>
        <div class="settings-content" id="settings-content">
            <div class="slider-container">
                <label for="max-tokens-slider">模型生成长度上限</label>
                <div class="slider-info">
                    <span>256</span>
                    <span class="value-display" id="max-tokens-value">1024</span>
                    <span>2048</span>
                </div>
                <input type="range" id="max-tokens-slider" min="256" max="2048" step="128" value="1024">
            </div>
            <div class="slider-container">
                <label for="history-length-slider">最大对话记忆轮数</label>
                <div class="slider-info">
                    <span>2</span>
                    <span class="value-display" id="history-length-value">10</span>
                    <span>20</span>
                </div>
                <input type="range" id="history-length-slider" min="2" max="20" step="1" value="10">
            </div>
        </div>
    </div>
    
    <div class="control-buttons">
        <button id="clear-btn" disabled>清除对话历史</button>
    </div>
    
    <div class="chat-container" id="chat-container">
        <div class="message bot-message">
            您好！我是由Moonshot AI开发的Kimi-VL多模态对话助手。请问有什么我可以帮助您的？我支持文本和图像输入，请随时向我提问。
        </div>
    </div>
    
    <div id="loading">
        <div class="spinner"></div>
        <p>正在生成回答，请稍候...</p>
    </div>
    
    <div class="input-container">
        <button id="upload-btn" class="upload-btn" disabled>
            <i class="fa fa-image"></i> 上传图片
        </button>
        <input type="file" id="upload-input" accept="image/*" multiple>
        <input type="text" id="user-input" placeholder="在此输入您的问题..." disabled>
        <button id="send-btn" disabled>发送</button>
    </div>
    
    <div class="image-preview-container" id="image-preview-container"></div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const chatContainer = document.getElementById('chat-container');
            const userInput = document.getElementById('user-input');
            const sendBtn = document.getElementById('send-btn');
            const clearBtn = document.getElementById('clear-btn');
            const loading = document.getElementById('loading');
            const modelLoading = document.getElementById('model-loading');
            const chatId = document.getElementById('chat-id').textContent;
            const uploadBtn = document.getElementById('upload-btn');
            const uploadInput = document.getElementById('upload-input');
            const imagePreviewContainer = document.getElementById('image-preview-container');
            
            // 设置相关元素
            const settingsToggle = document.getElementById('settings-toggle');
            const settingsContent = document.getElementById('settings-content');
            const maxTokensSlider = document.getElementById('max-tokens-slider');
            const maxTokensValue = document.getElementById('max-tokens-value');
            const historyLengthSlider = document.getElementById('history-length-slider');
            const historyLengthValue = document.getElementById('history-length-value');
            
            // 默认值
            let maxNewTokens = 1024;
            let maxHistoryLength = 10;
            
            // 聊天历史存储
            const chatHistory = [];
            
            // 初始化历史记录 - 添加欢迎消息
            const welcomeMessage = '您好！我是由Moonshot AI开发的Kimi-VL多模态对话助手。请问有什么我可以帮助您的？我支持文本和图像输入，请随时向我提问。';
            chatHistory.push({
                role: 'assistant',
                content: welcomeMessage
            });
            
            // 上传的图片存储
            let uploadedImages = [];
            
            // 压缩图像函数 - 更严格的图像压缩
            async function compressImage(file, maxWidth = 1200, maxHeight = 1200, quality = 0.7) {
                return new Promise((resolve, reject) => {
                    try {
                        const reader = new FileReader();
                        reader.onload = function(event) {
                            try {
                                const img = new Image();
                                img.onload = function() {
                                    try {
                                        // 计算新尺寸
                                        let width = img.width;
                                        let height = img.height;
                                        let needResize = false;
                                        
                                        console.log(`原始图片大小: ${width}x${height}, 文件大小: ${Math.round(file.size / 1024)}KB`);
                                        
                                        // 强制调整大尺寸图片
                                        if (width > maxWidth || height > maxHeight) {
                                            needResize = true;
                                            if (width > height) {
                                                height = Math.round(height * maxWidth / width);
                                                width = maxWidth;
                                            } else {
                                                width = Math.round(width * maxHeight / height);
                                                height = maxHeight;
                                            }
                                            console.log(`调整尺寸为: ${width}x${height}`);
                                        }
                                        
                                        // 创建canvas进行压缩
                                        const canvas = document.createElement('canvas');
                                        canvas.width = width;
                                        canvas.height = height;
                                        const ctx = canvas.getContext('2d');
                                        ctx.fillStyle = 'white'; // 设置白色背景
                                        ctx.fillRect(0, 0, canvas.width, canvas.height);
                                        ctx.drawImage(img, 0, 0, width, height);
                                        
                                        // 转换为base64 - 始终使用JPEG格式（除非是PNG且需要透明度）
                                        let dataUrl;
                                        
                                        // 对于较大图片，使用更低的质量
                                        let compressionQuality = quality;
                                        if (file.size > 3 * 1024 * 1024) { // 大于3MB
                                            compressionQuality = 0.5;
                                        } else if (file.size > 1 * 1024 * 1024) { // 大于1MB
                                            compressionQuality = 0.6;
                                        }
                                        
                                        if (file.type === 'image/png' && needCheckTransparency(ctx, width, height)) {
                                            // PNG且有透明像素时保留PNG格式，但仍然压缩
                                            dataUrl = canvas.toDataURL('image/png', 0.8);
                                            console.log('使用PNG格式保留透明度');
                                        } else {
                                            // 其他情况一律转为JPEG以获得更好的压缩效果
                                            dataUrl = canvas.toDataURL('image/jpeg', compressionQuality);
                                            console.log(`使用JPEG格式，质量: ${compressionQuality}`);
                                        }
                                        
                                        // 估算压缩后大小
                                        const compressedSize = Math.round(dataUrl.length * 0.75 / 1024);
                                        console.log(`压缩后大小: ${compressedSize}KB, 压缩率: ${Math.round(compressedSize / (file.size / 1024) * 100)}%`);
                                        
                                        // 如果压缩后仍然过大，进一步减小质量
                                        if (compressedSize > 1024) { // 大于1MB
                                            console.log('图像仍过大，进一步压缩');
                                            const finalDataUrl = canvas.toDataURL('image/jpeg', 0.4);
                                            console.log(`最终大小: ${Math.round(finalDataUrl.length * 0.75 / 1024)}KB`);
                                            resolve(finalDataUrl);
                                        } else {
                                            resolve(dataUrl);
                                        }
                                    } catch (e) {
                                        console.error('Canvas处理图像时出错:', e);
                                        reject(e);
                                    }
                                };
                                img.onerror = function(e) {
                                    console.error('加载图像时出错:', e);
                                    reject(new Error('无法加载图像'));
                                };
                                img.src = event.target.result;
                            } catch (e) {
                                console.error('处理图像数据时出错:', e);
                                reject(e);
                            }
                        };
                        reader.onerror = function(e) {
                            console.error('读取文件时出错:', e);
                            reject(e);
                        };
                        reader.readAsDataURL(file);
                    } catch (e) {
                        console.error('压缩图像初始化错误:', e);
                        reject(e);
                    }
                });
            }
            
            // 检查图像是否有透明像素
            function needCheckTransparency(ctx, width, height) {
                // 采样检查，不检查所有像素以提高性能
                const imageData = ctx.getImageData(0, 0, width, height);
                const data = imageData.data;
                const sampleSize = Math.max(1, Math.floor(data.length / 4000)); // 最多检查1000个像素
                
                for (let i = 3; i < data.length; i += 4 * sampleSize) {
                    if (data[i] < 255) { // Alpha值小于255表示有透明度
                        return true;
                    }
                }
                return false;
            }
            
            // 上传图片按钮点击事件
            uploadBtn.addEventListener('click', function() {
                uploadInput.click();
            });
            
            // 图片选择事件
            uploadInput.addEventListener('change', async function(e) {
                const files = e.target.files;
                if (files.length > 0) {
                    // 添加加载指示器
                    loading.style.display = 'block';
                    
                    try {
                        // 图片数量限制
                        const maxImages = 2; // 最多允许上传2张图片
                        if (files.length > maxImages) {
                            alert(`一次最多只能上传${maxImages}张图片`);
                        }
                        
                        // 处理前清空已上传图片，避免累积
                        if (uploadedImages.length + files.length > maxImages) {
                            uploadedImages = [];
                            imagePreviewContainer.innerHTML = '';
                        }
                        
                        // 处理每张图片
                        for (let i = 0; i < Math.min(files.length, maxImages); i++) {
                            const file = files[i];
                            // 检查文件类型
                            if (!file.type.startsWith('image/')) {
                                console.warn(`跳过非图像文件: ${file.name}, 类型: ${file.type}`);
                                continue;
                            }
                            
                            // 检查文件大小
                            if (file.size > 10 * 1024 * 1024) { // 大于10MB
                                alert(`图片 ${file.name} 太大 (${Math.round(file.size/1024/1024)}MB)，请选择较小的图片`);
                                continue;
                            }
                            
                            try {
                                // 压缩图像
                                console.log(`开始压缩图片: ${file.name}, 大小: ${Math.round(file.size/1024)}KB`);
                                const compressedDataUrl = await compressImage(file);
                                
                                const imageObj = {
                                    file: file,
                                    dataUrl: compressedDataUrl,
                                    originalSize: Math.round(file.size / 1024), // 原始大小（KB）
                                    compressedSize: Math.round(compressedDataUrl.length * 0.75 / 1024) // 压缩后大小（KB）
                                };
                                
                                console.log(`图片 ${file.name} 压缩: ${imageObj.originalSize}KB -> ${imageObj.compressedSize}KB`);
                                
                                uploadedImages.push(imageObj);
                                addImagePreview(imageObj, uploadedImages.length - 1);
                                
                                // 如果图片仍然很大，给用户警告
                                if (imageObj.compressedSize > 1024) {
                                    console.warn(`压缩后的图片依然较大: ${imageObj.compressedSize}KB`);
                                }
                            } catch (error) {
                                console.error(`处理图片 ${file.name} 时出错:`, error);
                                alert(`处理图片 ${file.name} 时出错: ${error.message}`);
                            }
                        }
                        
                        // 如果没有成功上传任何图片
                        if (uploadedImages.length === 0) {
                            alert('没有成功上传任何图片，请重试');
                        }
                    } catch (error) {
                        console.error('图片处理总体错误:', error);
                        alert('图片处理出错: ' + error.message);
                    } finally {
                        loading.style.display = 'none';
                    }
                }
                uploadInput.value = ''; // 清空input以允许再次选择相同文件
            });
            
            // 添加图片预览
            function addImagePreview(imageObj, index) {
                const previewDiv = document.createElement('div');
                previewDiv.className = 'image-preview';
                previewDiv.innerHTML = `
                    <img src="${imageObj.dataUrl}" alt="预览">
                    <div class="remove-image" data-index="${index}">×</div>
                `;
                imagePreviewContainer.appendChild(previewDiv);
                
                // 移除图片按钮点击事件
                previewDiv.querySelector('.remove-image').addEventListener('click', function() {
                    const removeIndex = parseInt(this.getAttribute('data-index'));
                    uploadedImages.splice(removeIndex, 1);
                    refreshImagePreviews();
                });
            }
            
            // 刷新所有图片预览
            function refreshImagePreviews() {
                imagePreviewContainer.innerHTML = '';
                uploadedImages.forEach((img, idx) => {
                    addImagePreview(img, idx);
                });
            }
            
            // 切换设置面板
            settingsToggle.addEventListener('click', function() {
                settingsContent.classList.toggle('active');
                settingsToggle.querySelector('span').textContent = 
                    settingsContent.classList.contains('active') ? '▲' : '▼';
            });
            
            // 更新拖动条值显示和实时应用
            maxTokensSlider.addEventListener('input', function() {
                maxNewTokens = parseInt(this.value);
                maxTokensValue.textContent = maxNewTokens;
            });
            
            historyLengthSlider.addEventListener('input', function() {
                maxHistoryLength = parseInt(this.value);
                historyLengthValue.textContent = maxHistoryLength;
            });
            
            // 清理响应中的特殊标记
            function cleanResponse(text) {
                // 移除各种结束标记
                return text.replace(/<\|eot\|>/g, '')
                           .replace(/<eot>/g, '')
                           .replace(/<\/eot>/g, '')
                           .replace(/<\|im_end\|>/g, '')
                           .replace(/\[EOS\]/g, '')
                           .trim();
            }
            
            // 检查模型是否已加载
            function checkModelStatus() {
                fetch('/api/generate', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ user_input: '', chat_id: chatId })
                })
                .then(response => {
                    if (response.status === 503) {
                        // 模型仍在加载，继续等待
                        setTimeout(checkModelStatus, 5000);
                    } else {
                        // 模型已加载，启用输入
                        modelLoading.style.display = 'none';
                        sendBtn.disabled = false;
                        userInput.disabled = false;
                        uploadBtn.disabled = false;
                        clearBtn.disabled = false;
                        
                        // 激活设置面板
                        settingsContent.classList.add('active');
                        settingsToggle.querySelector('span').textContent = '▲';
                        
                        // 如果历史为空，添加欢迎消息到历史记录
                        if (chatHistory.length === 0) {
                            const welcomeMessage = '您好！我是由Moonshot AI开发的Kimi-VL多模态对话助手。请问有什么我可以帮助您的？我支持文本和图像输入，请随时向我提问。';
                            chatHistory.push({
                                role: 'assistant',
                                content: welcomeMessage
                            });
                        }
                    }
                })
                .catch(error => {
                    // 发生错误，继续等待
                    setTimeout(checkModelStatus, 5000);
                });
            }
            
            // 启动检查
            checkModelStatus();

            // 添加消息到聊天界面
            function addMessage(content, isUser) {
                const messageDiv = document.createElement('div');
                messageDiv.className = `message ${isUser ? 'user-message' : 'bot-message'}`;
                
                // 处理内容
                if (isUser) {
                    const messageContent = document.createElement('div');
                    messageContent.className = 'message-content';
                    
                    // 添加图片
                    if (uploadedImages.length > 0) {
                        const messageImages = document.createElement('div');
                        messageImages.className = 'message-images';
                        uploadedImages.forEach(img => {
                            const imgElement = document.createElement('img');
                            imgElement.src = img.dataUrl;
                            imgElement.className = 'uploaded-image';
                            messageImages.appendChild(imgElement);
                        });
                        messageContent.appendChild(messageImages);
                    }
                    
                    // 添加文本
                    const textElement = document.createElement('div');
                    textElement.textContent = content;
                    messageContent.appendChild(textElement);
                    
                    messageDiv.appendChild(messageContent);
                    
                    // 保存到历史记录
                    const userMessageContent = [];
                    
                    // 添加图片内容
                    uploadedImages.forEach(img => {
                        userMessageContent.push({
                            type: "image",
                            image: img.dataUrl
                        });
                    });
                    
                    // 添加文本内容（仅当文本不为空时）
                    if (content.trim()) {
                        userMessageContent.push({
                            type: "text",
                            text: content
                        });
                    }
                    
                    // 确保内容不为空
                    if (userMessageContent.length === 0) {
                        userMessageContent.push({
                            type: "text",
                            text: " " // 至少添加一个空格，防止空消息
                        });
                    }
                    
                    chatHistory.push({
                        role: "user",
                        content: userMessageContent
                    });
                    
                    // 清空上传的图片
                    uploadedImages = [];
                    imagePreviewContainer.innerHTML = '';
                } else {
                    // 清理机器人响应中的特殊标记
                    content = cleanResponse(content);
                    
                    // 处理◁think▷标签
                    const thinkPattern = /◁think▷([\s\S]*?)◁\/think▷([\s\S]*)/;
                    const match = content.match(thinkPattern);
                    
                    if (match) {
                        // 有思考过程，分开显示
                        const thinkContent = match[1].trim();
                        const realResponse = match[2].trim();
                        
                        // 创建思考过程容器
                        const thinkingContainer = document.createElement('div');
                        thinkingContainer.className = 'thinking-container';
                        
                        // 创建思考标题
                        const thinkingHeader = document.createElement('div');
                        thinkingHeader.className = 'thinking-header';
                        thinkingHeader.innerHTML = '<span>查看思考过程</span><span class="toggle-indicator">▼</span>';
                        
                        // 创建思考过程元素
                        const thinkingDiv = document.createElement('div');
                        thinkingDiv.className = 'thinking-process';
                        thinkingDiv.textContent = thinkContent;
                        
                        // 添加点击事件
                        thinkingHeader.addEventListener('click', function() {
                            thinkingDiv.classList.toggle('show');
                            const indicator = this.querySelector('.toggle-indicator');
                            indicator.textContent = thinkingDiv.classList.contains('show') ? '▲' : '▼';
                        });
                        
                        // 创建真实回复元素
                        const responseDiv = document.createElement('div');
                        responseDiv.className = 'real-response';
                        responseDiv.textContent = realResponse;
                        
                        // 添加到容器
                        thinkingContainer.appendChild(thinkingHeader);
                        thinkingContainer.appendChild(thinkingDiv);
                        
                        // 清空并添加新元素
                        messageDiv.innerHTML = '';
                        messageDiv.appendChild(thinkingContainer);
                        messageDiv.appendChild(responseDiv);
                    } else {
                        // 没有思考标签，直接显示内容
                        messageDiv.textContent = content;
                    }
                    
                    // 保存到历史记录
                    chatHistory.push({
                        role: 'assistant',
                        content: content
                    });
                }
                
                chatContainer.appendChild(messageDiv);
                chatContainer.scrollTop = chatContainer.scrollHeight;
            }

            async function sendMessage() {
                const message = userInput.value.trim();
                if (!message && uploadedImages.length === 0) return;

                try {
                    // 检查图片总大小
                    let totalImageSize = 0;
                    uploadedImages.forEach(img => {
                        totalImageSize += img.compressedSize;
                    });
                    
                    console.log(`发送请求: ${uploadedImages.length}张图片，总大小约${totalImageSize}KB, 文本长度: ${message.length}`);
                    
                    if (totalImageSize > 5 * 1024) { // 超过5MB
                        if (!confirm(`上传的图片总大小超过5MB (${Math.round(totalImageSize/1024)}MB)，可能导致请求失败。是否继续？`)) {
                            return;
                        }
                    }
                
                    // 添加用户消息到聊天框
                    addMessage(message, true);
                    userInput.value = '';
                    
                    // 显示加载中
                    loading.style.display = 'block';
                    sendBtn.disabled = true;
                    userInput.disabled = true;
                    uploadBtn.disabled = true;
                    clearBtn.disabled = true;
                    
                    // 创建FormData对象用于上传文件
                    const formData = new FormData();
                    formData.append('user_input', message);
                    formData.append('chat_id', chatId);
                    formData.append('max_new_tokens', maxNewTokens);
                    formData.append('max_history_length', maxHistoryLength);
                    
                    // 添加历史记录 - 确保只发送最近的历史
                    const recentHistory = chatHistory.slice(-maxHistoryLength*2);
                    formData.append('chat_history', JSON.stringify(recentHistory));
                    
                    // 设置更长的超时时间
                    const controller = new AbortController();
                    const timeoutId = setTimeout(() => controller.abort(), 120000); // 2分钟超时
                    
                    // 发起请求，捕获网络错误
                    try {
                        console.log("开始发送请求...");
                        const startTime = Date.now();
                        
                        const response = await fetch('/api/generate', {
                            method: 'POST',
                            body: formData,
                            signal: controller.signal
                        });
                        
                        const endTime = Date.now();
                        console.log(`请求完成，耗时: ${(endTime - startTime) / 1000}秒`);
                        
                        // 清除超时
                        clearTimeout(timeoutId);
                        
                        if (!response.ok) {
                            const errorText = await response.text();
                            console.error(`HTTP错误 ${response.status}: ${errorText}`);
                            throw new Error(`服务器返回错误: ${response.status} ${response.statusText}`);
                        }

                        const data = await response.json();
                        // 添加AI回复到聊天框
                        addMessage(data.response, false);
                    } catch (error) {
                        console.error("请求或解析错误:", error);
                        
                        if (error.name === 'AbortError') {
                            addMessage(`请求超时: 服务器响应时间过长，请稍后重试或尝试上传较小的图片。`, false);
                        } else if (error.name === 'TypeError' && error.message.includes('NetworkError')) {
                            addMessage(`网络错误: 连接服务器失败，请检查网络连接。`, false);
                        } else if (error.name === 'SyntaxError') {
                            addMessage(`数据解析错误: 服务器返回的数据格式不正确。`, false);
                        } else {
                            addMessage(`发生错误: ${error.message}`, false);
                        }
                    }
                } catch (error) {
                    console.error("发送消息准备阶段错误:", error);
                    addMessage(`准备发送时出错: ${error.message}`, false);
                } finally {
                    loading.style.display = 'none';
                    sendBtn.disabled = false;
                    userInput.disabled = false;
                    uploadBtn.disabled = false;
                    clearBtn.disabled = false;
                    
                    // 清空已上传图像，避免重复发送
                    uploadedImages = [];
                    imagePreviewContainer.innerHTML = '';
                }
            }
            
            // 清除对话历史
            async function clearHistory() {
                try {
                    clearBtn.disabled = true;
                    
                    const response = await fetch('/api/clear_history', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({ chat_id: chatId })
                    });
                    
                    const data = await response.json();
                    
                    if (data.success) {
                        // 清除聊天界面
                        chatContainer.innerHTML = '';
                        // 添加欢迎消息
                        const welcomeMessage = '您好！我是由Moonshot AI开发的Kimi-VL多模态对话助手。请问有什么我可以帮助您的？我支持文本和图像输入，请随时向我提问。';
                        const welcomeDiv = document.createElement('div');
                        welcomeDiv.className = 'message bot-message';
                        welcomeDiv.textContent = welcomeMessage;
                        chatContainer.appendChild(welcomeDiv);
                        
                        // 清除本地历史
                        chatHistory.length = 0;
                        // 添加欢迎消息到历史记录
                        chatHistory.push({
                            role: 'assistant',
                            content: welcomeMessage
                        });
                    } else {
                        alert('清除历史失败: ' + (data.error || '未知错误'));
                    }
                } catch (error) {
                    alert('清除历史时发生错误: ' + error.message);
                } finally {
                    clearBtn.disabled = false;
                }
            }

            // 添加事件监听器
            sendBtn.addEventListener('click', sendMessage);
            clearBtn.addEventListener('click', clearHistory);
            userInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter' && !sendBtn.disabled) {
                    sendMessage();
                }
            });
        });
    </script>
</body>
</html> 